import React, { useState, useCallback, forwardRef, useImperativeHandle, useEffect, useMemo, useRef } from "react";
import { useTablePipeline, features, BaseTable } from "ali-react-table";
import { Checkbox, Menu, Radio, TreeSelect, Space } from "antd";
import { useTableConfig } from "./hooks/useTableConfig";
import SearchForm from "./SearchForm";
import { SimpleTable, CheckboxTable, RadioTable, TreeSelectTable } from "./table";
import QuickSearch from "./QuickSearch";
import ColsSetting from "./ColsSetting";
import { useColsSetting } from "./ColsSetting/hook";
import { cloneDeep } from "lodash";
import Iconfont from "@/components/IconFont";


/**
 *
 * @param {*} tableKey
 * @param {*} form
 * @param {*} columns
 * @param {*} hasPagination
 * @param {*} tableRequest
 * @param {*} leftBtns
 * @param {*} rightBtns
 * @param {*} mounted
 * @returns
 */
export const SearchSimpleTable = React.memo(
	forwardRef(function (
		{
			type = "simple",
			header,
			actions: Actions,
			actionsProps,
			leftBtns,
			rightBtns,
			rightBtnsContent: RightBtnsContent,
			rightBtnsContentProps,
			mounted,
			sortProps,
			style,
			footer,
			className,
			maxCol,
			...searchSimpleTableProps
		},
		ref
	) {
		const ComponentName = "SearchSimpleTable";
		useEffect(() => {
			console.warn(`${ComponentName},初始化`);
			mounted && mounted();
		}, []);
		/////////////////////////////////////////////
		const {
			form,
			fetchList,
			dataSource,
			updateSearchQuery,
			beforeReset,
			//
			tableKey,
			rowKey = "id",
			columns,
			searchSpan,
			hasPagination,
			paginationProps,
			hasQuickSearch,
			footerDataSource,
			columnResize,
			nextPipeline,
			getRowsByIds,
			onChange,
			hasColsSetting,
			hasToggleSearchForm,
			tableFooter,
			getRowProps,
			showMoreAction,
			getSearchFormVal
		} = searchSimpleTableProps;

		const onSearchReset = useCallback(values => {
			updateSearchQuery(values || {});
			return fetchList(values || {}, null, "reset");
		}, []);
		const onSearchFinish = useCallback((originQuery, action = "search") => {
			updateSearchQuery(originQuery);
			return fetchList(cloneDeep(originQuery), null, action);
		}, []);
		const onSearchChange = useCallback(values => {
			updateSearchQuery(values || {});
		}, []);

		const searchFormProps = {
			form,
			tableKey,
			columns,
			searchSpan,
			beforeReset,
			onSearchReset,
			onSearchFinish,
			onSearchChange,
			quickSearch: hasQuickSearch ? QuickSearch : null,
			showMoreAction,
			getSearchFormVal,
			rowKey,
			maxCol
		};

		const simpleTableProps = {
			tableKey,
			rowKey,
			dataSource,
			columns,
			hasPagination,
			tableFooter,
			footerDataSource,
			//
			columnResize,
			nextPipeline,
			getRowsByIds,
			onChange,
			sortProps,
			getRowProps,
			style
		};

		const ColsSettingProps = {};

		if (hasColsSetting) {
			const { filterColumns, realColumns, saveRemoteData, initColsSetting } = useColsSetting({ tableKey, columns });

			simpleTableProps["columns"] = realColumns;

			ColsSettingProps["tableKey"] = tableKey;
			ColsSettingProps["defaultColumns"] = filterColumns;
			ColsSettingProps["columns"] = realColumns;
			ColsSettingProps["initColsSetting"] = initColsSetting;
			ColsSettingProps["saveRemoteData"] = saveRemoteData;
		}

		const [searchFormVisible, setSearchFormVisible] = useState(true);
		const handleToggleSearchForm = useCallback(() => {
			setSearchFormVisible(!searchFormVisible);
		}, [searchFormVisible, setSearchFormVisible]);

		const RefSearchTable = useRef(null);
		useImperativeHandle(ref, () => ({
			// 暴露给父组件的方法
			RefSearchTable: RefSearchTable.current,
			name: "SearchSimpleTable",
			...(RefSearchTable.current || {})
		}));

		return (
			<div className={"views-container " + className}>
				{header}
				{<SearchForm {...searchFormProps} searchFormVisible={searchFormVisible} RefSearchTable={RefSearchTable} />}
				{hasToggleSearchForm && (
					<div className="toggle-search-form">
						<div className="toggle-search-form-target" onClick={handleToggleSearchForm}>
							{searchFormVisible ? (
								<>
									<Iconfont type="iconz045" />
									<span>收起</span>
								</>
							) : (
								<>
									<Iconfont type="iconzhankai" />
									<span>展开</span>
								</>
							)}
						</div>
					</div>
				)}
				<div className="views-action">
					{Actions ? (
						<Actions {...(actionsProps || {})}>{hasColsSetting && <ColsSetting {...ColsSettingProps} />}</Actions>
					) : (
						<>
							<Space className="views-action-left">{leftBtns}</Space>
							<Space className="views-action-right">
								{rightBtns}
								{hasColsSetting && !RightBtnsContent && <ColsSetting {...ColsSettingProps} />}
								{RightBtnsContent && (
									<RightBtnsContent {...(rightBtnsContentProps || {})}>
										{hasColsSetting && <ColsSetting {...ColsSettingProps} />}
									</RightBtnsContent>
								)}
							</Space>
						</>
					)}
				</div>
				{type == "simple" && <SimpleTable ref={RefSearchTable} {...simpleTableProps} paginationProps={paginationProps} />}
				{type == "checkbox" && <CheckboxTable ref={RefSearchTable} {...simpleTableProps} paginationProps={paginationProps} />}
				{type == "radio" && <RadioTable ref={RefSearchTable} {...simpleTableProps} paginationProps={paginationProps} />}
				{type == "treeSelect" && <TreeSelectTable ref={RefSearchTable} {...simpleTableProps} paginationProps={paginationProps} />}
				{footer}
			</div>
		);
	})
);

/**
 *
 * 继承 SearchSimpleTable
 * @returns
 */
export const SearchCheckboxTable = React.memo(
	forwardRef(function ({ type = "checkbox", ...props }, ref) {
		const ComponentName = "SearchCheckboxTable";
		useEffect(() => {
			console.warn(`${ComponentName},初始化`);
		}, []);

		const RefSearchSimpleTable = useRef(null);
		useImperativeHandle(ref, () => ({
			// 暴露给父组件的方法
			RefSearchSimpleTable: RefSearchSimpleTable.current,
			name: "SearchCheckboxTable",
			...(RefSearchSimpleTable.current || {})
		}));

		return <SearchSimpleTable ref={RefSearchSimpleTable} type={type} {...props} />;
	})
);
/**
 *
 * 继承 SearchSimpleTable
 * @returns
 */
export const SearchRadioTable = React.memo(
	forwardRef(function ({ type = "radio", ...props }, ref) {
		const ComponentName = "SearchRadioTable";
		useEffect(() => {
			console.warn(`${ComponentName},初始化`);
		}, []);

		const RefSearchSimpleTable = useRef(null);
		useImperativeHandle(ref, () => ({
			// 暴露给父组件的方法
			RefSearchSimpleTable: RefSearchSimpleTable.current,
			name: "RefSearchSimpleTable",
			...(RefSearchSimpleTable.current || {})
		}));

		return <SearchSimpleTable ref={RefSearchSimpleTable} type={type} {...props} />;
	})
);

/**
 *
 * 继承 SearchSimpleTable
 * @returns
 */
export const SearchTreeSelectTable = React.memo(
	forwardRef(function ({ type = "treeSelect", ...props }, ref) {
		const ComponentName = "SearchTreeSelectTable";
		useEffect(() => {
			console.warn(`${ComponentName},初始化`);
		}, []);

		const RefSearchSimpleTable = useRef(null);
		useImperativeHandle(ref, () => ({
			// 暴露给父组件的方法
			RefSearchSimpleTable: RefSearchSimpleTable.current,
			name: "SearchTreeSelectTable",
			...(RefSearchSimpleTable.current || {})
		}));

		return <SearchSimpleTable ref={RefSearchSimpleTable} type={type} {...props} />;
	})
);
